import React, { Component } from "react";
import { Carousel, Icon } from "antd";

import XHeader from "../../components/header";
import XFooter from "../../components/footer";

import Banner_1 from "../../images/activities/banner_1.png";
import Banner_2 from "../../images/activities/banner_2.png";
import Act_1 from "../../images/activities/act_1.png";
import Act_2 from "../../images/activities/act_2.png";
import Act_3 from "../../images/activities/act_3.png";
import Act_4 from "../../images/activities/act_4.png";
import Act_5 from "../../images/activities/act_5.png";
import Act_6 from "../../images/activities/act_6.png";
import Act_7 from "../../images/activities/act_7.png";

import "antd/dist/antd.css";
import "./index.scss";

export default class Activities extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  componentDidMount() {}
  render() {
    return (
      <section className="page page-activities">
        <div className="banner">
          <XHeader activeIndex={7} className="header" />
          <Carousel className='slide' autoplay>
            <div>
              <div className='item-inner'>
                <h2>
                  <p>第二届上海文化企业十强</p>
                </h2>
              </div>
              <div className='img' style={{ backgroundImage: 'url('+ Banner_1 +')' }}></div>
            </div>
            <div>
              <div className='item-inner'>
                <h2>
                  <p>2019年上海市新文创活力指数排行榜</p>
                </h2>
              </div>
              <div className='img' style={{ backgroundImage: 'url('+ Banner_2 +')' }}></div>
            </div>
          </Carousel>
        </div>
        <div className="contain">
          <div className="inner">
            <div className="top">
              <p>文创活动</p>
              <ul className="box">
                <li className="item">
                  <img src={Act_1} />
                  <div className='caption'>
                    <p>上海市2019上半年惠民公益演出</p>
                    <Icon className='icon' type="arrow-right" />
                  </div>
                </li>
                <li className="item">
                  <img src={Act_2} />
                  <div className='caption'>
                    <p>2019上海设计周火爆来袭</p>
                    <Icon className='icon' type="arrow-right" />
                  </div>
                </li>
                <li className="item">
                  <img src={Act_3} />
                  <div className='caption'>
                    <p>上海创客嘉年华揭幕在即</p>
                    <Icon className='icon' type="arrow-right" />
                  </div>
                </li>
                <li className="item">
                  <img src={Act_4} />
                  <div className='caption'>
                    <p>上海设计之都活动周</p>
                    <Icon className='icon' type="arrow-right" />
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div className="contain bottom">
          <div className="inner">
            <div className="content">
              <div className="left">
                <div className="mod-title">
                  <span>文创热门资讯</span>
                  <span>更多 >></span>
                </div>
                <div className="item">
                  <div className="img"><img src={Act_5} /></div>
                  <div className="text">
                    <h2 className="title">全国首个国家文创实验区推出“政策50条”覆盖15个领域</h2>
                    <div>2019-02-25</div>
                    <div>来源：中国新闻</div>
                  </div>
                </div>
                <div className="item">
                  <div className="img"><img src={Act_6} /></div>
                  <div className="text">
                    <h2 className="title">故宫文创产品国际综合展亮相悉尼</h2>
                    <div>2019-02-22</div>
                    <div>来源：央视网</div>
                  </div>
                </div>
                <div className="item">
                  <div className="img"><img src={Act_7} /></div>
                  <div className="text">
                    <h2 className="title">《关于推进文化创意产业创新发展的意见》聚焦两大主攻方向</h2>
                    <div>2019-02-18</div>
                    <div>来源：北京日报</div>
                  </div>
                </div>
              </div>
              <div className="right">
                <div className="mod-title">
                  <span>文创热门资讯</span>
                  <span>更多 >></span>
                </div>
                <ul>
                  <li>
                    <p>关于加快本市文化创意产业创新发展的若干意见</p>
                    <div className='date'>2019-02-20</div>
                  </li>
                  <li>
                    <p>上海市文化创意产业示范楼宇和空间管理办法（试行）</p>
                    <div className='date'>2019-02-12</div>
                  </li>
                  <li>
                    <p>上海市文化创意产业发展三年行动计划（2016—2018 年）</p>
                    <div className='date'>2019-01-23</div>
                  </li>
                  <li>
                    <p>上海市文化创意产业园区管理办法</p>
                    <div className='date'>2019-01-14</div>
                  </li>
                  <li>
                    <p>上海创意与设计产业发展“十三五”规划</p>
                    <div className='date'>2019-01-12</div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <XFooter />
      </section>
    );
  }
}
